{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/css/generalize.css" />
<style>
.tabBox,.block,.capture{height: 100%;}
.block{ display:none;}
.show{ display:block;}
.myCode .one{ margin: 0; position: relative;}
.myCode .one .goodsimg{ position: absolute; top: 0; left: 0; height: 100%;  width: 100%;}

.myCode .one .info{ border-radius: 0.15rem; height: auto; display: block; position: absolute; top: 50%; margin-top: -1rem; left: 45%; margin-left: -1.1rem; background: #fff; z-index: 9999; padding: 0.12rem;width: auto; bottom: auto; }
/*.myCode .one .info .right,.myCode .one .info .left{ width: 1.1rem; }*/
.myCode .one .info .right img{ width: 1.8rem;height: 1.8rem;}
.myCode .one .info .left img{flex-direction: column;}
.myCode .one .info .left div p{flex-direction: column; width: 70%; overflow: hidden; }
</style>
{/block}
{block name='pageType'}myCode{/block}
{block name="main" }
<div class="page-bd ">
    <!-- 页面内容-->
        <div class="tabBox" >
          <div class="block show">        
            <div class="one capture">
              <img src="{:settings('share_bg')}" alt="" class="goodsimg">
              <div class="info">
              	<div class="right">
                    <img src="" class="qcode" alt="">
                </div>
               <!-- <div class="left">
                  <img class="headimgurl" src="{$userInfo['headimgurl']|default='__STATIC__/mobile/default/images/defheadimg.jpg'}" alt="">
                  <div>
                    <p class="fs34 color_0 fw_b">{$userInfo['nick_name']}</p>
                    <span class="fs26 color_9">{$userInfo['signature']}</span>
                  </div>
                </div>-->
              </div>
            </div>
          </div>
          <!--<div class="block">
              <div class="two capture">
                <div class="info">
                    <div class="left">
                      <img  class="headimgurl" src="{$userInfo['headimgurl']|default='__STATIC__/mobile/default/images/defheadimg.jpg'}" alt="">
                      <div>
                        <p class="fs34 color_0 fw_b">{$userInfo['nick_name']}</p>
                        <span class="fs26 color_9">{$userInfo['signature']}</span>
                      </div>
                    </div>
                </div>
                <img src="{:settings('share_bg')}" alt="" class="goodsimg">
                <div class="right">
                    <img src="" class="qcode" alt="">
                </div>
              </div>

          </div>-->
          <!--<div class="block">
            <div class="three capture">
              <div class="info">
                <img  class="headimgurl" src="{$userInfo['headimgurl']|default='__STATIC__/mobile/default/images/defheadimg.jpg'}" alt="">
                <p class="fs34 color_0 fw_b">{$userInfo['nick_name']}</p>
                <span class="fs26 color_9">{$userInfo['signature']}</span>
              </div>
              <img src="{:settings('share_bg')}" alt="" class="goodsimg">
              <div class="right">
                  <img src="" class="qcode" alt="">
              </div>
            </div>
          </div>-->
        </div>
        <!--<div class="tab">
          <div class="tablist"><img src="__STATIC__/mobile/default/images/mycode02.png?v=1" alt=""></div>
          <div class="tablist boxOpacity"><img src="__STATIC__/mobile/default/images/mycode04.png?v=1" alt=""></div>
          <div class="tablist boxOpacity"><img src="__STATIC__/mobile/default/images/mycode03.png?v=1" alt=""></div>
        </div>-->

    </div>
    <div class="page-ft">
     <div class="BGcolor_3 saveImg"><img src="__STATIC__/mobile/default/images/goodsIcon04.png" alt=""><span class="fs28 fw_b color_w">保存图片</span></div>
     <div class="BGcolor_3 copy" data-clipboard-action="copy" data-clipboard-text="{$userInfo.shareUrl}"><img src="__STATIC__/mobile/default/images/myCode01.png" alt=""><span class="fs28 fw_b color_w">复制链接</span></div>
     <div class="BGcolor_3 hide"><img src="__STATIC__/mobile/default/images/mycode05.png" alt=""><span class="fs28 fw_b color_w">分享链接</span></div>
    </div>
    <div class="model">
      <div class="modelBg" onclick="hidemodel()"></div>
      <div class="modelContent">
        <div class="imgBox">
        <img src="" alt="">
        <span class="fs28 color_w">长按图片保存</span>
      </div>
      </div>
    </div>
</div>
{/block}

{block name="footer"}
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script src="__STATIC__/js/clipboard.min.js"></script>
<script>
function hidemodel(){
    $('.model').hide()
}
function getHeadImg(){
    jq_ajax('{:url("member/api.users/getHeadImg")}','',function(res){
        $('.headimgurl').attr('src',res.headimgurl);
    })
}
{:strstr($userInfo['headimgurl'],'http')?'getHeadImg();':''}
$(function(){
	var h =$(window).height()-$(".van-nav-bar").height();
	$(".goodsimg").height(h);
	
   $('.tablist').on('click',function(){
	 var index=$(this).index()
	 $(this).removeClass('boxOpacity')
	 $(this).siblings().addClass('boxOpacity')
	 $('.block').eq(index).addClass('show')
	 $('.block').eq(index).siblings().removeClass('show')
   })
   //保存图片
  $(".saveImg").on("click", function (event) {
        event.preventDefault();
        html2canvas($('.show'), {
            allowTaint: true,
            scale:2,
            ureCORS:true,
            taintTest: false,
            onrendered: function (canvas) {
				var url = canvas.toDataURL();
                $('.model').find('img').attr('src',url);
                $('.model').show()
				/*var u = navigator.userAgent, app = navigator.appVersion;
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
				
				if (isIOS){
					$('.model').find('img').attr('src',url);
					$('.model').show()
				}else{
				   //以下代码为下载此图片功能
					var triggerDownload = $("<a>").attr("href", url).attr("download",  "saveImg.png").appendTo("body");
					triggerDownload[0].click();
					triggerDownload.remove();
				}*/
            }
        });
    });
	
	//复制
  var clipboard = new Clipboard('.copy');
  clipboard.on('success', function(e) {
	  _alert('复制成功.');
	  e.clearSelection();
  });
  clipboard.on('error', function(e) {
	  _alert('复制失败.');
  });
   //获取二维码
   jq_ajax('{:url("member/api.users/myCode")}','',function(res){
	   if (res.code == 0){
			_alert(res.msg);
			return false;   
	   }
	   $('.qcode').attr('src',res.file);
	});
})


</script>

{/block}